<template>
    <div>
        <yd-scrolltab>
            <yd-scrolltab-panel v-for="day in dayList" :label="day.format('M月D日')" :key="day.toString()">
                <yd-grids-group :rows="4">
                <animate-list enter="fadeIn" leave="fadeOut">
                    <yd-grids-item v-for="item in parking(day)" :key="item.parking_id">
                        <img slot="icon" :src="item.user_image ? item.user_image : 'assets/img/default/car.png'">
                        <span slot="text">{{ item.parking_num }}</span>
                    </yd-grids-item>
                </animate-list>
                </yd-grids-group>
                <div v-if="myParking(day)">
                    <yd-button size="large" type="danger" @click.native="cancelParking(day)">取消预约</yd-button>
                </div>
                <div v-else>
                    <yd-button size="large" type="primary" @click.native="bookParking(day)">我要预约{{ day.format('M月D日') }}的车位</yd-button>
                </div>
            </yd-scrolltab-panel>
        </yd-scrolltag>
        <yd-popup v-model="showInput" position="bottom" height="50%">
            <div class="codePrompt" v-if="day">
                <yd-icon name="question" size=".4rem"></yd-icon>
                预约{{ day.format('M月D日') }}的车位，您的车牌号是：
            </div>
            <div class="codeBlock">
                <div>{{ carNumber[0] }}</div>
                <div>{{ carNumber[1] }}</div>
                <div class="dot"></div>
                <div>{{ carNumber[2] }}</div>
                <div>{{ carNumber[3] }}</div>
                <div>{{ carNumber[4] }}</div>
                <div>{{ carNumber[5] }}</div>
                <div>{{ carNumber[6] }}</div>
            </div>
            <custom-keyboard :on-change="inputNumber" :on-done="submitParking"></custom-keyboard>
        </yd-popup>
    </div>
</template>

<script>
module.exports = {
    created () {
        this.$store.dispatch('getParking', (data) => {

        })
    },
    data () {
        return {
            showInput: false,
            carNumber: '',
            day: undefined,
            dayList: _.map(_.range(0,7), (n) => {
                return moment().add(n, 'days')
            })
        }
    },
    computed: {
        parkingList () {
            return this.$store.getters.parkingList
        }
    },
    methods: {
        parking (day) {
            return _.filter(this.parkingList.list, (item) => {
                if(day.isSame(item.parking_date, 'day')) {
                    return item
                }
            })
        },
        myParking (day) {
            const result = _.filter(this.parkingList.list, {user_id: this.$store.getters.userID, parking_date: day.format('YYYY-MM-DD')})
            return result && result.length>0
        },
        bookParking (day) {
            const result = _.filter(this.parkingList.list, {parking_date: day.format('YYYY-MM-DD')})
            if(result && result.length<10) {
                this.day = day
                this.showInput = true
            } else {
                $dialog.toast({
                    mes: '车位已满',
                    timeout: 1000,
                    icon: 'error'
                })
            }
        },
        cancelParking (day) {
            this.$store.dispatch('cancelParking', {day: day.format('YYYYMMDD'), resolve: (data) => {

            }})
        },
        inputNumber (s) {
            this.carNumber = s
        },
        submitParking () {
            this.showInput = false
            this.$store.dispatch('bookParking', {day: this.day.format('YYYYMMDD'), car: this.carNumber, resolve: (data) => {

            }})
        }
    }
}
</script>

<style scoped>
.yd-grids-icon {
    height: .8rem;
}
.yd-grids-icon img {
    height: .8rem;
    border-radius: .8rem;
}
.codeBlock {
    width: 8.3rem;
    margin: 0 auto;
    font-size: .8rem;
    line-height: .8rem;
    height: 1.1rem;
    padding-top: .2rem;
}
.codeBlock div {
    display: inline-block;
    border: 1px solid #ccc;
    box-shadow: 0 0 .1rem 0px rgba(0, 0, 0, 0.3);
    width: .9rem;
    text-align: center;
}
.codeBlock .dot {
    width: .2rem;
    height: .2rem;
    background-color: #000;
    margin-bottom: .2rem;
}
.codePrompt {
    margin: .2rem;
    font-size: .38rem;
    color: #fff;
    background-color: #04BE02;
    border-radius: .1rem;
    padding-left: .2rem;
}
.yd-scrolltab-active {
    box-shadow: 0 0 .1rem 0px rgba(0, 0, 0, 0.3);
}
.yd-scrolltab-nav {
    width: 1.42rem;
}
.yd-scrolltab-icon {
    display: none;
}
.yd-scrolltab-title {
    font-size: .28rem;
}
.yd-scrolltab-item {
    padding-left: .1rem;
    padding-right: .1rem;
}
</style>
